<template>
  <div class="container">
   <!-- x: {{ mouse.x }}
   y:{{ mouse.y }} -->
   x: {{ x }}
   y:{{ y }}
   累加1：
   {{ count }}
   <button @click="add" >+1</button>
  </div>
</template>

<script>
import {reactive,onMounted, onUnmounted, toRefs,ref} from 'vue'
// 抽离成单独的方法  return 出要使用的数据或者方法 然后在setup中使用 
const useMouse=()=>{
    // 1 鼠标滑动 在模板中展示x,y坐标
    // 数据
    const mouse = reactive({
      x: 0,
      y: 0,
    });
    //   方法
    const move=(e)=>{
    mouse.x=e.pageX
    mouse.y=e.pageY
    }
   //  dom渲染 监听 鼠标移动事件 并有回调函数 move
    onMounted(() => {
      document.addEventListener('mousemove',move)
    });
   //  销毁 注销事件
   onUnmounted(() => {
      document.removeEventListener('mousemove',move)
   })
   return mouse
}
export default {
  name: "App",

  setup() {
   const mouse =useMouse()
   //  2,累加
   // 数据
      const count =ref(0)
      // 方法
      const add=()=>{
         count.value=count.value+1
      }
   //  return {mouse};
    return {...toRefs(mouse),count,add};
  },
};
</script>

<style>
</style>